<!--
 * @FileDescription: 超级无敌table组件
 * @Author: XD
 * @Date: 10-15-2020
 * @LastEditors: 10-15-2020
 * @LastEditTime: 10-15-2020
 -->


<template>


        <el-scrollbar style="height:100%">
            <el-form ref="ruleForm"
                     label-width="150px"
                     :model="ruleForm"
            >
                <template v-for="(item,index) in this.config.table">

                    <!--      单行输入框-->
                    <el-form-item
                            :inline="true"
                            :key="index"
                            v-if="!item.addEditType && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDInput :dataType="item.dataType"
                                     v-model="ruleForm[item.prop]"
                                     :disabled="item.disabled||disabled"
                            ></XDInput>
                        </div>


                    </el-form-item>

                    <!--     多行输入框-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType == 'textArea' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDInput type="textarea" v-model="ruleForm[item.prop]"
                                     :disabled="item.disabled||disabled"
                            ></XDInput>
                        </div>
                    </el-form-item>


                    <!-- 单选radio-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='radio' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDRadio :list="item.list"
                                     v-model="ruleForm[item.prop]"
                                     :disabled="item.disabled||disabled"
                            ></XDRadio>
                        </div>
                    </el-form-item>


                    <!--    网络单选下拉选择框-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='netDropDown' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDSelecter :list="item.list"
                                        type="netDropDown"
                                        v-model="ruleForm[item.prop]"
                                        :link="item.link"
                                        :disabled="item.disabled||disabled"
                            ></XDSelecter>
                        </div>
                    </el-form-item>

                    <!--   网络多选下拉选择框-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='multiNetDropDown' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDSelecter :list="item.list"
                                        type="multiNetDropDown"
                                        v-model="ruleForm[item.prop]"
                                        :disabled="item.disabled||disabled"
                            ></XDSelecter>
                        </div>
                    </el-form-item>


                    <!--  单选下拉选择框-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='dropDown' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDSelecter :list="item.list"
                                        type="dropDown"
                                        :store="item.store"
                                        v-model="ruleForm[item.prop]"
                                        :link="item.link"
                                        :disabled="item.disabled||disabled"
                            ></XDSelecter>
                        </div>


                    </el-form-item>

                    <!--  树状lastNode选择器-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='lastNodeTree' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDTree :list="item.list"
                                    v-model="ruleForm[item.prop]"
                                    :disabled="item.disabled||disabled"
                            ></XDTree>
                        </div>
                    </el-form-item>

                    <!-- 下拉框 分类选择器-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='cascader' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDCascader :list="item.list"
                                        v-model="ruleForm[item.prop]"
                                        :disabled="item.disabled||disabled"
                            ></XDCascader>
                        </div>
                    </el-form-item>

                    <!-- 时间选择器 Date-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='timePicker' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDDatePicker type="date"
                                          v-model="ruleForm[item.prop]"
                                          :disabled="item.disabled||disabled"
                            ></XDDatePicker>
                        </div>
                    </el-form-item>

                    <!-- 时间选择器 datetime-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='timePickerDateTime' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDDatePicker type="datetime"
                                          v-model="ruleForm[item.prop]"
                                          :disabled="item.disabled||disabled"
                            ></XDDatePicker>
                        </div>
                    </el-form-item>

                    <!--   上传-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='upload' && !item.addEditHidden"
                            :label="item.label"
                    >
                        <div class="formItemDiv" >
                            <span v-if="item.required">*</span>
                            <XDDownloader v-if="disabled"
                                          v-model="ruleForm[item.prop]"
                            ></XDDownloader>

                            <XDUpload v-else v-model="ruleForm[item.prop]"
                                      :disabled="item.disabled||disabled"
                                      :limit="item.limit"
                                      :mediaOnly="item.mediaOnly"
                            ></XDUpload>
                        </div>
                    </el-form-item>

                    <!--  关联选择器-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='linkDropDown && !item.addEditHidden'"
                            :label="item.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <XDLinkSelecter
                                    :list="item.list"
                                    :store="item.store"
                                    v-model="ruleForm[item.prop]"
                                    :disabled="item.disabled||disabled"
                            ></XDLinkSelecter>
                        </div>
                    </el-form-item>

                    <!--插槽-->
                    <el-form-item
                            :key="index"
                            v-if="item.addEditType=='slot' && !item.addEditHidden"
                            :label="item.label"

                    >
                        <template>
                        <div class="formItemDiv">
                            <span v-if="item.required">*</span>
                            <slot :name="item.slotName"
                                  :data="ruleForm[item.prop]"
                            ></slot>
                        </div>
                        </template>
                    </el-form-item>

                </template>





                <!--保存按钮-->
                <el-form-item
                        label=""
                        v-if="!this.disabled"
                >
                    <div style="width: 100%;display: flex;justify-content: flex-end; padding-right: 50px">
                        <el-button @click="handleClose">取 消</el-button>
                        <el-button type="primary" @click="submit">保 存</el-button>
                    </div>
                </el-form-item>


            </el-form>

        </el-scrollbar>



</template>

<script>
    import {insertTableData, loadDropDown, updateTableData} from "../request";

    export default {
        name: 'XDFormA',
        components: {
        },
        props: ['config', 'data', 'disabled'],
        data() {
            return {
                //表格数据
                ruleForm: {

                },
                privateVisible: false,
            }
        },
        methods: {
            // 关闭窗口
            handleClose() {
                this.$store.state.slotData = {}
                this.reload()
            },
            // 生成form对象
            getForm() {
                console.log(this.data)
                this.config.table.map(item=>{
                    if (item.prop && this.data != undefined && this.data[item.prop] != undefined) {
                        this.ruleForm[item.prop] = this.data[item.prop]
                    } else if (item.prop) {
                        this.ruleForm[item.prop] = ''
                        console.log("a")
                    }
                })
                console.log(this.ruleForm);
            },

          

            submit() {
                if (this.config.update) {
                    this.updateFunc()
                } else{
                    this.insertFunc()
                }
            },

            //修改
            updateFunc() {
                var data = this.ruleForm
                Object.assign(data, this.$store.state.slotData, data);

                let requestJson = this.config.update
                data.id = this.id
                if(requestJson.mineId) {
                    data.mineId = this.$store.state.mineId
                }
                if(requestJson.companyId) {
                    data.companyId = this.$store.state.companyId
                }
                if(requestJson.params) {
                    Object.assign(data, data, requestJson.params)
                }
                requestJson.data = data
              
              

                if(this.requiredCheck() == true) {
                    updateTableData(requestJson).then(response=>{
                        let res = response.msg
                        if (res=='success') {
                            this.onSuccess("修改成功！")
                            this.handleClose()
                        }else {
                            this.onFailed(res)
                        }
                    }).catch(error => {
                        console.log(error)
                        this.onFailed("修改失败！")
                    })
                }else{
                    this.onFailed(this.requiredCheck())
                }
            },

            //插入
            insertFunc() {
                var data = this.ruleForm
                Object.assign(data, this.$store.state.slotData, data);

                let requestJson = this.config.insert
                if(requestJson.mineId) {
                    data.mineId = this.$store.state.mineId
                }
                if(requestJson.companyId) {
                    data.companyId = this.$store.state.companyId
                }
                requestJson.data = data

                if(this.requiredCheck() == true) {
                    insertTableData(requestJson).then(response=>{
                        let res = response.msg
                        if (res=='success') {
                            this.onSuccess("新增成功！")
                            this.handleClose()
                        } else {
                            this.onFailed(res)
                        }
                    }).catch(error => {
                        console.log(error)
                        this.onFailed("新增失败！")
                    })
                }else{
                    this.onFailed(this.requiredCheck())
                }

            },

            // 验证
            requiredCheck() {
                for(var i=0;i<this.config.table.length;i++) {
                    if (this.config.table[i].required) {
                        if(this.ruleForm[this.config.table[i].prop] == '') {
                            return '操作失败! ' +this.config.table[i].label + '是必填项.'
                        }
                    }
                }
                return true
            },

            //成功msg
            onSuccess(message) {
                this.$message({
                    message: message || '成功',
                    type: 'success'
                });
            },
            //失败msg
            onFailed(message) {
                this.$message({
                    message: message || '失败',
                    type: 'error'
                });
            },

        },
        inject:['reload'],
        watch: {
            data: {
            
                handler: function() {
                
   
                 
                 this.getForm()
             
                },
                    immediate: true,
                    deep:true

            }
        },
    }
</script>

<style lang="scss" scoped>

    :deep(.el-scrollbar__wrap){
        overflow-x: hidden;
    }
    :deep(.el-select){
        width: 100%;
    }


    .formItemDiv {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding-right: 50px;
        div{
            width: 100%;
        }
        .formData{
            width: 250px;
            display: flex;
        }
        span{
            margin-left: 10px;
            color: #de2900;
        }
        .formDev{
            width: 400px;
            display: flex;
        }
    }
    .formItemDiv > span {
        padding-top: 2px;
        padding-right: 2px;
        margin-left: -8px;
        color: #de2900;
    }

    .pub_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;
        :deep(.el-dialog) {
            margin: 0 auto !important;
            height: 60%;
            overflow: hidden;
            .el-dialog__body {
                position: absolute;
                left: 0;
                top: 54px;
                bottom: 0;
                right: 0;
                padding: 0 50px;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;

                &::-webkit-scrollbar {

                    display: none;
                }
                &::-webkit-scrollbar-thumb {
                    display: none;
                }
                &::-webkit-scrollbar-track {
                    display: none;
                }
            }

        }
    }
    .footer{
        position: absolute;
        right: 30px;
        margin-bottom: 50px;
    }
</style>